<template>
  <view class="fill-out-the-form">
    <Header title="服务表单" v-model:model-value="headerHeader">
      <template>
        <view class="header-cell">
          <view class="jump-box" @click="handleToFillRecord">
            <text class="text">填写记录</text>
            <text class="ali-icon icon-you1"></text>
          </view>
        </view>
      </template>
    </Header>
    <view class="container">
      <Paglist v-model="dataList" :is-init-api="true" @register="register" :scroll-top-bottom="260">
        <view class="list-container">
          <template v-for="(item, index) in dataList" :key="index">
            <view class="form-item-box" @click="handleClick(item)">
              <view class="ellipsis-text">
                <text class="text">{{ item.title }}</text>
              </view>
              <view class="ali-icon icon-article box-icon"></view>
              <view class="create-user">创建人：{{ item.userName }}</view>
            </view>
          </template>
        </view>
      </Paglist>
    </view>
  </view>
</template>
<script setup lang="ts">
  import Header from '@/components/Header/index.vue';
  import { ref, reactive, provide } from 'vue';
  import { fillOutTheFormList } from '@/api/serviceForm/index';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import type { IFillOutTheForm } from '@/api/serviceForm/types';
  import { navigateTo } from '@/router';
  import { PermissionsTypeEnum, RecordTypeEnum } from '@/enums/serviceFormEnum';
  import { useUserStore } from '@/store/modules/user';
  const headerHeader = ref(0);
  const dataList = ref<IFillOutTheForm[]>([]);
  const [register, { refresh }] = useConList();
  provide('api', fillOutTheFormList);

  const handleClick = (item: IFillOutTheForm) => {
    navigateTo({
      name: 'serviceFormFilling',
      options: {
        serviceTicketFormId: item.id,
        role: PermissionsTypeEnum.Secretary,
      },
    });
  };

  const handleToFillRecord = () => {
    navigateTo({
      name: 'sysServiceFormRecord',
      options: {
        recordType: RecordTypeEnum.ADMIN_MY,
      },
    });
  };
</script>
<style lang="scss" scoped>
  .fill-out-the-form {
    .header-cell {
      display: flex;
      justify-content: center;
      // padding: 24rpx 32rpx;
      height: 88rpx;
      .label {
        font-size: 32rpx;
        line-height: 48rpx;
      }
      .jump-box {
        display: flex;
        gap: 8rpx;
        align-items: center;
        color: #969799;
        .text {
          font-size: 28rpx;
          line-height: 40rpx;
        }
        .icon-you1 {
          font-size: 32rpx;
        }
      }
    }

    .container {
      padding: 32rpx;
      .list-container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .form-item-box {
          box-sizing: border-box;
          position: relative;
          height: 312rpx;
          width: 331rpx;
          margin-bottom: 24rpx;
          border-radius: 8px;
          background: linear-gradient(180deg, #2878ff 0%, #3935ff 100%);
          padding: 32rpx;
          padding-bottom: 112rpx;
          .ellipsis-text {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            color: white;
            .text {
              font-size: 32rpx;
              font-style: normal;
              font-weight: 400;
              line-height: 56rpx;
              color: white;
            }
          }

          .box-icon {
            font-size: 70rpx;
            color: rgba(255, 255, 255, 0.2);
            position: absolute;
            right: 12rpx;
            bottom: 0;
          }
          .create-user {
            position: absolute;
            bottom: 28rpx;
            left: 16rpx;
            font-size: 24rpx;
            color: #dcdee0;
          }
        }
      }
    }
  }
</style>
